/**
 * 修改mxGraph样式
 */
/* eslint-disable no-new-object */
import mxgraph from './VueMxGraphLoader.ts'
import * as global from './common/common.js'
const { mxConstants, mxPerimeter, mxEdgeStyle } = mxgraph
export function configureStylesheet (graph) {
  mxConstants.VERTEX_SELECTION_STROKEWIDTH = 2
  mxConstants.VERTEX_SELECTION_COLOR = '#106DFF'
  mxConstants.VERTEX_SELECTION_DASHED = false

  mxConstants.STYLE_ROUNDED = true
  mxConstants.EDGE_SELECTION_COLOR = '#1890ff'
  mxConstants.EDGE_SELECTION_STROKEWIDTH = 2
  mxConstants.EDGE_SELECTION_DASHED = false

  var style = new Object()
  style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE
  style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter
  style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER

  style[mxConstants.STYLE_ROUNDED] = true
  // style[mxConstants.STYLE_OPACITY] = '100';
  style[mxConstants.STYLE_FONTSIZE] = '12'
  style[mxConstants.STYLE_FONTSTYLE] = 0
  style[mxConstants.DEFAULT_VALID_COLOR] = '#1890ff'
  style[mxConstants.VERTEX_SELECTION_DASHED] = false

  graph.getStylesheet().putDefaultVertexStyle(style)

  // 组件之间的连线样式
  var defaultedgeStyle = new Object()
  // style = graph.getStylesheet().getDefaultEdgeStyle();
  defaultedgeStyle[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_CONNECTOR
  defaultedgeStyle[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_CLASSIC
  defaultedgeStyle[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE
  defaultedgeStyle[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER
  defaultedgeStyle[mxConstants.STYLE_STROKEWIDTH] = '2'
  defaultedgeStyle[mxConstants.EDGE_SELECTION_STROKEWIDTH] = '3'
  defaultedgeStyle[mxConstants.STYLE_FONTCOLOR] = '#446299'
  graph.getStylesheet().putDefaultEdgeStyle(defaultedgeStyle)

  var edgeStyle = new Object()
  edgeStyle[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_CONNECTOR
  edgeStyle[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_CLASSIC
  edgeStyle[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE
  edgeStyle[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER
  edgeStyle[mxConstants.STYLE_STROKEWIDTH] = '2'
  edgeStyle[mxConstants.STYLE_STROKECOLOR] = '#446299'
  edgeStyle[mxConstants.EDGE_SELECTION_STROKEWIDTH] = '3'
  // edgeStyle[mxConstants.EDGE_SELECTION_COLOR] = '#409EFF';
  edgeStyle[mxConstants.STYLE_FONTCOLOR] = '#446299'
  edgeStyle[mxConstants.STYLE_EDGE] = mxEdgeStyle.SideToSide // mxEdgeStyle.EntityRelation

  graph.getStylesheet().putCellStyle('hop', edgeStyle)

  var edgeStyleDisable = new Object()
  edgeStyleDisable[mxConstants.STYLE_DASHED] = '1'// 0实线 1虚线
  edgeStyleDisable[mxConstants.STYLE_STROKECOLOR] = '#CCC'
  edgeStyle[mxConstants.EDGE_SELECTION_COLOR] = '#CCC'
  graph.getStylesheet().putCellStyle('disabled', edgeStyleDisable)

  var edgeStyleEvaluationY = new Object()
  edgeStyleEvaluationY[mxConstants.STYLE_STROKECOLOR] = 'green'
  graph.getStylesheet().putCellStyle('evaluation-true', edgeStyleEvaluationY)

  var edgeStyleEvaluationN = new Object()
  edgeStyleEvaluationN[mxConstants.STYLE_STROKECOLOR] = 'red'
  graph.getStylesheet().putCellStyle('evaluation-false', edgeStyleEvaluationN)

  var edgeStyleParallelY = new Object()
  edgeStyleParallelY[mxConstants.STYLE_DASHED] = '1'
  graph.getStylesheet().putCellStyle('parallel-true', edgeStyleParallelY)

  var edgeStyleParallelN = new Object()
  edgeStyleParallelN[mxConstants.STYLE_DASHED] = '0'
  graph.getStylesheet().putCellStyle('parallel-false', edgeStyleParallelN)

  // 注释组件样式
  style = new Object()
  style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL
  style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT
  style[mxConstants.STYLE_LABEL_PADDING] = '20'
  // style[mxConstants.STYLE_VERTICAL_LABEL_POSITION] = 'bottom';
  style[mxConstants.STYLE_VERTICAL_ALIGN] = 'middle'
  style[mxConstants.STYLE_STROKECOLOR] = '#50bfff'
  style[mxConstants.STYLE_STROKEWIDTH] = '1'
  style[mxConstants.STYLE_FILLCOLOR] = '#F0F9EB'
  graph.getStylesheet().putCellStyle('note', style)
}
// 组件图片样式
export function configurePluginImageStyle (type, graph, pluginData) {
  // 定义锚点默认图片
  var portStyle = new Object()
  portStyle[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE
  graph.getStylesheet().putCellStyle('port', portStyle)
  // 锚点 input样式
  var portInputStyle = new Object() // mxUtils.clone(style);
  portInputStyle[mxConstants.STYLE_IMAGE] = `${global.PLUGIN_INPUT_IMAGE}`
  graph.getStylesheet().putCellStyle('port-input', portInputStyle)
  // // 锚点 output样式
  var portOutputStyle = new Object() // mxUtils.clone(style);
  portOutputStyle[mxConstants.STYLE_IMAGE] = `${global.PLUGIN_OUTPUT_IMAGE}`
  graph.getStylesheet().putCellStyle('port-output', portOutputStyle)

  // 定义转换组件图片默认样式
  var stepStyle = new Object()
  stepStyle[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL
  stepStyle[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER
  stepStyle[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_CENTER
  stepStyle[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_CENTER
  stepStyle[mxConstants.STYLE_IMAGE_WIDTH] = '30'
  stepStyle[mxConstants.STYLE_IMAGE_HEIGHT] = '30'
  stepStyle[mxConstants.STYLE_VERTICAL_LABEL_POSITION] = 'bottom'
  stepStyle[mxConstants.STYLE_VERTICAL_ALIGN] = 'top'
  stepStyle[mxConstants.STYLE_STROKECOLOR] = '#50bfff'
  stepStyle[mxConstants.STYLE_STROKEWIDTH] = '2'

  graph.getStylesheet().putCellStyle('step', stepStyle)
  // 定义作业组件图片默认样式
  var entryStyle = new Object()
  entryStyle[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL
  entryStyle[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER
  entryStyle[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_CENTER
  entryStyle[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_CENTER
  entryStyle[mxConstants.STYLE_IMAGE_WIDTH] = '30'
  entryStyle[mxConstants.STYLE_IMAGE_HEIGHT] = '30'
  entryStyle[mxConstants.STYLE_VERTICAL_LABEL_POSITION] = 'bottom'
  entryStyle[mxConstants.STYLE_VERTICAL_ALIGN] = 'top'
  entryStyle[mxConstants.STYLE_STROKECOLOR] = '#50bfff'
  entryStyle[mxConstants.STYLE_STROKEWIDTH] = '2'
  graph.getStylesheet().putCellStyle('entry', entryStyle)

  // 树转列表
  if (pluginData) {
    const pluginList = deep(pluginData)
    let prefix = ''

    // 样式前缀
    if (type === global.TRANS_MODEL) {
      // 转换
      prefix = `trans`
    } else {
      // 作业
      prefix = `job`
    }

    // 样式转换
    for (let i = 0; i < pluginList.length; i++) {
      var transStyle = new Object()
      transStyle[mxConstants.STYLE_IMAGE] = `${global.IMAGE_PATH}${
        pluginList[i].image
      }`
      graph
        .getStylesheet()
        .putCellStyle(`${prefix}-${pluginList[i].pluginId}`, transStyle)
    }
  }
}

/**
 * 树转数组扁平化结构
 * 深度优先遍历  递归
 */
export function deep (data) {
  let result = []
  for (let i = 0; i < data.length; i++) {
    let child = data[i].children
    if (child) {
      const list = deep(child)
      result = result.concat(list)
    } else {
      result.push(data[i])
    }
  }
  return result
}
